<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a,img{
            border: 0;
            text-decoration: none;
        }

        body{
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
    </style>

    <link rel="stylesheet" type="text/css" href="sdmenu.css"/>

    <script type="text/javascript" src="../JS/tools.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            var menuSpan=document.querySelectorAll(".menuSpan");

            // 定义保存当前打开的菜单
            var openDiv=menuSpan[0].parentNode;

            for(var i=0;i<menuSpan.length;i++){
                menuSpan[i].onclick=function(){
                    // 获取当前span的父元素
                    var parentDiv=this.parentNode;

                    // 切换菜单的显示状态
                    toggleMenu(parentDiv);

                    // 判断openDiv和parentDiv是否相同
                    if(openDiv!=parentDiv && !hasClass(openDiv,"collapsed")){
                        // 打开菜单时关闭之前的菜单,为了方便将add改为toggle
                        // addClass(openDiv,"collapsed");
                        //不需要有移除的功能,只需要添加的功能
                        toggleMenu(openDiv);
                    }

                    // 修改openDiv为当前打开的菜单
                    openDiv=parentDiv;
                };
            }

            // 用来切换菜单折叠和显示状态
            function toggleMenu(obj){
                // 切换div之前,获取元素的高度
                var begin=obj.offsetHeight;

                // 关闭parentDiv
                toggleClass(obj,"collapsed");

                // 切换div之后,获取元素的高度
                var end=obj.offsetHeight;

                // 将元素的高度重置为begin
                obj.style.height=begin+"px";

                // 执行动画
                move(obj,"height",end,10,function(){
                    // 动画执行完毕,删除内联样式
                    obj.style.height="";
                });
            }

        };
    </script>
</head>
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">htaccess密码</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">推荐我们</a>
            <a href="#">链接我们</a>
            <a href="#">网络资源</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">JavaScript工具包</a>
            <a href="#">CSS驱动</a>
            <a href="#">CodingForums</a>
            <a href="#">CSS例子</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">测试电流</span>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
        </div>
    </div>
</body>
</html>